<template>
	<view class="flex-col" style="position: relative;">
		<image src="/static/home_bg.jpg" style="width: 100vw;position: absolute;z-index: -1" mode="widthFix"></image>
		<u-sticky bg-color="#92cf38;">
			<view style="padding-top: 110rpx; text-align: center; color: #fff; text-align: center;"
				class="flex-row items-center ">
				<view> <u-icon name="arrow-left" @click="goback()" size="24" color="#fff"></u-icon></view>
				<view class="flex-1">商品</view>
			</view>
			<view style="padding: 20rpx; margin-top: 20rpx; ">
				<u-search placeholder="请输入商品名称" bg-color="#f5f6f6" @click="showSearcPopup=true" v-model="keywords"
					@custom="cancelSearch()" @search="doSearch2()" :focus="searchFoucs" action-text="重置"
					:action-style="{color:'#fff','font-size':'36rpx'}" :show-action="true"></u-search>
			</view>
		</u-sticky>




		<u-popup :show="showSearcPopup" @close="hid" mode="top">
			<view style="padding: 20rpx; ">
				<view class="flex-row items-center">
					<view @click="showAction"><u-icon name="arrow-down" labelPos="left" :label="searchType"></u-icon>
					</view>
					<u-search placeholder="请输入商品名称" :show-action="false" custom-style="background:" bg-color="#f2f2f2"
						v-model="keywords"></u-search>
				</view>



				<view class="flex-row justify-between items-center" style="padding: 20px;">
					<button size="mini" @click="cancelSearch">重置</button> <button size="mini" type="primary"
						@click="doSearch()">确定</button>
				</view>
			</view>
		</u-popup>
		<u-action-sheet :actions="list" @select="selectClick" :closeOnClickOverlay="true" :closeOnClickAction="true"
			title="搜索类型" :show="showShearchType"></u-action-sheet>
		<view class="flex-col page">
			<!--    <view class="flex-col">   
      <view class="mt-18 flex-col justify-start items-center text-wrapper"><text class="text">轮播图</text></view>
    </view> -->


			<view class="flex-col group justify-center ">
				<view
					style="display: grid; grid-template-columns: repeat(4,1fr); background-color: #fff; border-radius: 10rpx;">
					<view v-for="(cate,index) in cateList" :key="index" @click="setCate(cate.id)"
						style="padding: 20rpx; position: relative;" class="flex-col cate justify-center items-center ">
						<image :src="cate.iconUrl" style="width: 50px;" mode="widthFix"></image>
						<view v-if="cate.id==selectCate" style="position: absolute; right: 10px; top: 5px;">
							<u-icon name="checkmark-circle-fill" color="#ff0000" size="20"></u-icon>
						</view>
						<view>{{cate.text}}</view>

					</view>
					<view class="flex-col cate justify-center items-center" style="padding: 20rpx;" @click="goMessage">
						<image src="/static/icons/gift.png" style="width: 50px;" mode="widthFix"></image>
						<view>健康咨询</view>
					</view>
				</view>

				<view class="flex-col list ">
					<view class="flex-col list-item" v-for="(item, index) in items" :key="index">
						<view class="flex-col self-stretch" @click="goDetails(item.id)">
							<!--<image class="image_3" :src="item.meta.imageUrl" mode="aspectFill" /> -->
							<image class="image_3" :src='item.meta.imageUrl' mode="widthFix" />

						</view>
						<view class="flex-row justify-start items-start">
							<text class="font_2 text_3 text_4 ellipsis flex-1"
								style="padding: 20rpx 10rpx; width: 100px; font-size: 28rpx;">{{item.name}}</text>
						</view>
						<view class="flex-row justify-between" style="padding-bottom:20rpx ;">
							<view>
								<view style="padding: 0 10rpx; color: #ff0101; font-size: 32rpx; font-weight: bold;">
									￥{{item.price?item.price.toFixed(2):''}}
								</view>
								<view
									style="padding: 0 10rpx; color: #888; font-size: 28rpx; font-weight: bold;text-decoration: line-through;">
									<text class="price2"
										v-if="item.meta.originalPrice&&item.meta.originalPrice>0&&item.meta.originalPrice!=item.price">￥{{item.meta.originalPrice?item.meta.originalPrice.toFixed(2):'0.00'}}</text>
								</view>
							</view>
							<view style="padding-right: 10px;font-size: 28rpx; ">
								积分:<text style="font-size: 28rpx; ">
									{{item.pv}}</text>
							</view>
						</view>
						<view class="flex-row justify-between items-center" style="padding-bottom:20rpx ;">
							<view style="padding: 0 10px;font-size: 28rpx; ">
								库存:<text style="font-size: 28rpx; ">
									{{item.stock}}</text>
							</view>
							<view style="padding-right: 10px;">
								<u-icon name='/static/icons/plus.png' size="22" @click="goCreateOrder(item)"></u-icon>
							</view>
						</view>
						<!-- 	<view class="flex-col items-start self-stretch group_2" @click="goDetails(item.id)">
							<view class="" style="width: 100%;">
								<view v-if="item.meta.treatmentEffect">
									<u-alert title="用途" type="warning"
										:description="item.meta.treatmentEffect"></u-alert>
								</view>
							</view>
							<u-read-more textIndent="0px" :showHeight="120">


								<view v-html="item.description" style="white-space: pre-wrap;"></view>
							</u-read-more>
						</view>
						<view style="background-color: #f2f4fd; margin:10px 20px;padding: 10rpx;" v-if="item.feedback"
							@click="goDetails(item.id)">
							<u-icon name="chat" :label="item.feedback"></u-icon>
						</view> -->
						<!-- 
						<view class="flex-row justify-between self-stretch section_2 view" @click="goDetails(item.id)">
							<view class="flex-row items-center">
								<view class="flex-row items-baseline">
									<text class="font">价格</text>
									<text class="font_5">￥{{item.price}}</text>
								</view>
								<view class="ml-76 flex-row items-baseline">
									<text class="font text_6">积分</text>
									<text class="font_5 ml-3">{{item.pv}}</text>
								</view>
							</view>
							<view class="flex-row items-baseline">
								<text class="font text_7">库存</text>
								<text class="ml-6 font_5">{{item.stock}}</text>
							</view>
						</view> -->

						<!-- 	<view class="flex-row justify-between items-center self-center ">

							<button class="text-wrapper_3" type="primary" size="mini"
								@click="goCreateOrder(item)">立即下单</button>
						</view> -->
					</view>
				</view>
			</view>
			<u-loadmore :status="status" v-if="status=='loading'||items.length>0"></u-loadmore>
			<u-empty v-if="status=='nomore'&&items.length==0"></u-empty>
		</view>
		<s-page-tabbar :show-report="isShowReport"></s-page-tabbar>
	</view>
</template>

<script>
	export default {
		props: {},
		data() {
			return {
				items: [],
				allData: [],
				isShowReport: false,
				keywords: "",
				status: "loading",
				sData: [],
				totalPage: 0,
				pageSize: 10,
				curpage: 1,
				searchFoucs: false,

				cateList: [],
				showSearcPopup: false,
				showShearchType: false,
				selectCate: "",
				searchType: "名称",
				tIndex: 0,
				list: [{
						name: '名称'
					},
					{
						name: '用途'
					}
				],
				carousels: [],
				indicatorDots: false,
				autoplay: true,
				interval: 5000,
				duration: 500,
				activeCard: [],
			};
		},
		onLoad(options) {
			if (options.searchType && options.searchType == 'keyword') {
				this.searchFoucs = true;
			} else {
				this.searchFoucs = false;
			}

			this.getProductCate();
			this.getCarousel()
			//uni.hideTabBar()
			this.isShowReport = false


			this.getGoodsList(options.cate);

		},
		onShow() {
			let token = this.$store.state.userToken;

			if (token) {
				let userinfo = this.$store.state.userInfo;

				if (userinfo.highestRole == 'AG_CSR' || userinfo.highestRole == 'AU_CSR') {
					this.isShowReport = false
				} else {
					this.isShowReport = true;
				}
			}

		},
		onPullDownRefresh() {

			this.getGoodsList()
		},
		onReachBottom() {
			if (this.curpage >= this.totalPage)
				return;
			this.curpage++;
			this.nextPage(this.sData, this.curpage)
		},

		methods: {
			goback() {
				uni.navigateBack()
			},
			goMessage() {
				let token = this.$store.state.userToken;

				if (!token) {
					uni.navigateTo({
						url: '/pages-publics/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages-publics/message/message?channel=healthConsult'
				})
			},
			hid() {
				this.showShearchType = false;
				this.showSearcPopup = false;
			},
			showAction() {
				let that = this;
				uni.showActionSheet({
					itemList: ['名称', '用途'],
					success: function(res) {
						if (res.tapIndex == 0) {
							that.searchType = '名称'
						} else {
							that.searchType = '用途'
						}
						that.searchData()
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			goUrl(url, type) {
				console.log(url)
				if (!url || url == '#') {
					return
				}
				if (url.indexOf('#小程序') != -1) {
					wx.navigateToMiniProgram({
						shortLink: url
					})
				} else if (url.indexOf('http') != -1) {
					if (type == 'image') {
						uni.navigateTo({
							url: '/pages-publics/imageView/imageView?adUrl=' + url
						})
					} else {
						uni.navigateTo({
							url: '/pages-publics/webview/webview?adUrl=' + url
						})
					}
				} else {
					this.goDetails(url)
				}
			},
			getCarousel() {
				this.$get({
					url: `${this.$Utils.ApiUrl}/carousel/items`

				}).then(res => {
					this.carousels = [];
					console.log(res)
					let keys = Object.keys(res)
					for (let item of keys) {
						let link = "#"
						let type = "url";

						if (res[item].addition.contentUrl) {
							link = res[item].addition.contentUrl
							type = "image";
						} else {
							type = "url";
							link = res[item].addition.link
						}
						this.carousels.push({
							id: item,
							title: res[item].text,
							link,
							type,
							imageUrl: res[item].addition.imageUrl
						})
					}

					console.log(this.carousels)

				})
				this.$get({
					url: `${this.$Utils.ApiUrl}/activityCard/items`

				}).then(res => {
					this.activeCard = [];
					console.log(res)
					let keys = Object.keys(res)
					for (let item of keys) {
						let link = "#"
						let type = "url";

						if (res[item].addition.contentUrl) {
							link = res[item].addition.contentUrl
							type = "image";
						} else {
							type = "url";
							link = res[item].addition.link
						}
						this.activeCard.push({
							id: item,
							type,
							title: res[item].text,
							link,
							imageUrl: res[item].addition.imageUrl

						})
					}

					console.log(this.activeCard)

				})
			},
			cancelSearch() {
				this.getGoodsList();
				this.showSearcPopup = false;
				this.hid()
			},
			doSearch2() {
				this.selectCate = "";
				this.curpage = 1;
				this.searchData()
			},
			doSearch() {
				this.curpage = 1;
				this.showSearcPopup = false;
				this.searchData()
			},
			selectClick(e) {
				this.searchType = e.name
				this.showShearchType = false;
				this.searchData()
			},
			setCate(cate) {
				console.log(cate)
				this.selectCate = cate;
				this.doSearch();
			},

			searchData() {

				this.sData = this.$Utils.copyObject(this.allData)
				let tmp = this.sData;
				let tmp2 = []
				if (this.keywords) {
					if (this.searchType == '名称') {
						tmp2 = tmp.filter(x => {
							return x.name.indexOf(this.keywords) != -1
						})
					} else {
						tmp2 = tmp.filter(x => {
							return x.meta.treatmentEffect && x.meta.treatmentEffect.indexOf(this.keywords) != -1
						})

					}
					console.log("tmp2=", tmp2)

				} else {
					tmp2 = tmp;
				}
				let tmp3 = tmp2
				console.log("this.selectCate=", this.selectCate)
				if (this.selectCate) {
					tmp3 = tmp2.filter(x => {
						return x.meta.categories && x.meta.categories.indexOf(this.selectCate) != -1;
					})
				}
				this.items = [];
				console.log("tmp3=", tmp3)
				this.sData = tmp3
				this.totalPage = Math.ceil(tmp3.length / this.pageSize);
				console.log(this.totalPage)
				this.nextPage(tmp3, this.curpage)

			},
			getProductCate() {
				this.$get({
					url: `${this.$Utils.ApiUrl}/dictionaries/product_category`

				}).then(res => {
					this.cateList = [];
					let keys = Object.keys(res)
					for (let item of keys) {
						this.cateList.push({
							id: item,
							text: res[item].text,
							iconUrl: res[item].addition.iconUrl
						})
					}
					console.log(this.cateList)


				})
			},
			goDetails(id) {
				uni.navigateTo({
					url: `/pages-publics/GoodsDetails/GoodsDetails?id=${id}`
				})
			},
			getLevel(level) {
				return this.$Utils.getUserLevel(level)
			},
			tabChange(url) {
				uni.switchTab({
					url
				})
			},

			getGoodsList(cate) {
				this.selectCate = "";
				this.keywords = [];
				this.curpage = 1;
				console.log(this.$Utils.ApiUrl)
				this.items = [];
				this.allData = [];
				this.status = 'loading';
				this.$get({
					url: `${this.$Utils.ApiUrl}/products`,
					data: {

					}
				}).then(res => {
					let data = res;
					for (let item of data) {
						if (!item.meta.weight) {
							this.$set(item.meta, 'weight', 0)
						}
					}
					this.allData = data.sort((a, b) => {
						return b.meta.weight - a.meta.weight;
					});
					this.sData = this.$Utils.copyObject(this.allData);
					// this.totalPage = Math.ceil(res.length / this.pageSize);
					this.totalPage = Math.ceil(res.length / this.pageSize);
					// console.log(this.totalPage)
					// this.nextPage(this.sData, this.curpage)
					if (cate) {
						this.setCate(cate);
					} else {
						console.log(this.totalPage)
						this.nextPage(this.sData, this.curpage)
					}
					uni.hideNavigationBarLoading()

					console.log(res)
				})
			},
			nextPage(data, page) {
				let startIdx = (page - 1) * 10;
				let endIdx = data.length
				//
				if (data.length - (page * this.pageSize) <= this.pageSize) {
					endIdx = data.length;
					this.status = 'nomore';
				} else {
					endIdx = page * this.pageSize
				}

				for (let i = startIdx; i < endIdx; i++) {
					let tmp = this.items.filter(x => {
						return x.id == data[i].id
					})
					if (tmp.length == 0) {
						this.items.push(data[i]);
					}

				}
			},
			goCreateOrder(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages-orders/create/create?id=' + item.id
				})
			}

		},
	};
</script>

<style scoped lang="scss">
	.ellipsis {
		padding-left: 20rpx;
		flex-basis: 70%;
		/* 设置宽度为父元素的70% */
		white-space: nowrap;
		/* 禁止文本换行，强制单行显示 */
		overflow: hidden;
		/* 隐藏超出容器的内容 */
		text-overflow: ellipsis;
		/* 超出部分使用省略号表示 */
		cursor: pointer;
		/* 鼠标悬停时显示指针，表示可点击 */

	}

	.swiper_image {
		border-radius: 10rpx;
		width: 100%;
		height: 340rpx;
	}

	.swiper_image2 {
		border-radius: 10rpx;
		width: 100%;
		height: 240rpx;
	}

	.swiper {
		height: 340rpx;
	}

	.swiper2 {
		height: 200rpx;
	}


	.cate {
		margin: 10rpx;

		border-radius: 20px;
		font-size: 28rpx;
	}

	.cate-active {
		background-color: #fcb3b3;
	}

	.ml-9 {
		margin-left: 15.7rpx;
	}

	.mt-15 {
		margin-top: 26.16rpx;
	}

	.mt-3 {
		margin-top: 5.23rpx;
	}

	.ml-3 {
		margin-left: 5.23rpx;
	}

	.ml-55 {
		margin-left: 95.93rpx;
	}

	.page {

		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.image {
			width: 100vw;
			height: 25.5814vw;
		}

		.text-wrapper {
			margin-left: 17.44rpx;
			margin-right: 26.16rpx;
			padding: 80.23rpx 0 73.26rpx;
			background-color: #fcb3b3;
			border-radius: 17.44rpx;

			.text {
				color: #ffffff;
				font-size: 62.79rpx;
				font-family: SourceHanSansCN;
				line-height: 57.89rpx;
			}
		}

		.group {
			padding: 0 17.44rpx;

			.section {
				margin: 0 10.47rpx;

				border-radius: 27.91rpx;

				.image_2 {
					width: 34.88rpx;
					height: 34.88rpx;
				}

				.text_2 {
					color: #666666;
				}
			}

			.list {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-gap: 10rpx;

				.list-item {
					background-color: #ffffff;
					border-radius: 17.44rpx;


					.image_3 {
						border-radius: 17.44rpx 17.44rpx 0rpx 0rpx;
						width: 100%;
						height: 300rpx;
					}

					.text-wrapper_2 {
						padding: 13.95rpx 0;
						background-color: #ff0101;

						.text_3 {
							margin-left: 5rpx;
						}

						.text_4 {
							line-height: 22.52rpx;
						}
					}

					.group_2 {
						margin-top: 24.42rpx;
						padding: 0 41.86rpx;

						.font_3 {
							font-size: 24.42rpx;
							font-family: SourceHanSansCN;
							line-height: 29.65rpx;
							color: #808080;
						}
					}

					.group_3 {
						margin-top: 31.4rpx;

						.font_4 {
							font-size: 28rpx;
							font-family: SourceHanSansCN;
							line-height: 22.6rpx;
							color: #ff0101;
						}

						.text_5 {
							line-height: 22.45rpx;
						}

						.image_4 {
							width: 27.91rpx;
							height: 27.91rpx;
						}
					}

					.section_2 {
						margin: 20.93rpx 20.93rpx 0 26.16rpx;

						.font_5 {
							font-size: 28rpx;
							font-family: SourceHanSansCN;
							line-height: 18.75rpx;
							font-weight: 700;
							color: #ff0101;
						}

						.text_6 {
							line-height: 22.22rpx;
						}

						.text_7 {
							line-height: 22.48rpx;
						}
					}

					.view {
						padding: 28rpx 20.93rpx 28rpx 31.4rpx;
						background-color: #f0f0f0;
						border-radius: 3.49rpx;
					}

					.text-wrapper_3 {
						margin-top: 22.67rpx;
						padding: 13.95rpx 0;
						background-color: #ff0101;
						border-radius: 28rpx;
						width: 176.16rpx;
						line-height: 1rem;
					}

					.font_2 {
						font-size: 28rpx;
						font-family: SourceHanSansCN;
						line-height: 22.6rpx;

					}
				}
			}

			.font {
				font-size: 28rpx;
				font-family: SourceHanSansCN;
				line-height: 22.6rpx;
				color: #383838;
			}
		}

		.section_3 {
			margin-top: 50.58rpx;
			padding: 12.21rpx 0 38.37rpx;
			background-color: #fafafa;

			.equal-division-item {
				width: 48.84rpx;
				height: 48.84rpx;
			}
		}
	}
</style>